import {useState} from "react";
import {Image, View} from "@tarojs/components";
import Taro, {useLoad} from '@tarojs/taro'
import './index.scss'
import MapPin from "../../components/svg/map-pin2.svg";
import Users from "../../components/svg/users.svg";
import Calendar from "../../components/svg/calendar.svg";
import {getRequest} from "../../util/request";

export default function Index() {

  useLoad((param) => {
    console.log('我发起的训练页面加载', param)
    queryList()
  })

  const [trainList, setTrainList] = useState<any>([]);

  const getStateStyle = () => {
    return {
      'color': 'forestgreen',
      'backgroundColor': '#dcfce7',
    }
  }

  const getStateName = () => {
    return '已提交'
  }

  const queryList = () => {
    getRequest('/bsOrgTrain/list?crtId=' + Taro.getStorageSync('userId'), res => {
      setTrainList(res.data.map(item => {
        return {
          id: item.id,
          title: item.title,
          location: item.place,
          startDate: item.startDate,
          endDate: item.endDate,
          expectedPersonCount: item.expectedPersonCount,
          image: item.cover
        }
      }))
    })
  }

  return (
    <View className=''>
      <View className='create-train'
        onClick={() => Taro.navigateTo({url: '/pages/orgtrainform/index?promoter=' + Taro.getStorageSync('realname')})}
      >发起培训</View>
      <View className='list-container'>
        {trainList.map((card, index) => (
          <View className='card' key={index} >
            <Image className='card-image' src={card.image} />
            <View className='card-title'>{card.title}</View>
            <View className='location'>
              <Image src={MapPin} className='avatar1' />{card.location}
            </View>
            <View className='persons'><Image src={Users} className='avatar1' />{card.expectedPersonCount}人</View>
            <View className='during-date'><Image src={Calendar} className='avatar1' />{card.startDate}~{card.endDate}</View>
            <View className='state-finish' style={getStateStyle()}>{getStateName()}</View>
          </View>
        ))}
      </View>
      <View className='page-bottom'></View>
    </View>
  )
}
